<template>
  <!-- 这个页面是 - 其它自定义选项 -->
  <MarkDisplay 
    :markdown="md" 
    keyboard-ctrl 
    autoFontSize 
    autoBlankTarget
    supportPreview
    urlHashCtrl
    baseUrl
    @title="setTitle"
    ref="display"
  />
  <!-- keyboardCtrl: 开启键盘方向键翻页 -->
  <!-- autoFontSize: 根据屏幕大小自动调节默认字号; 配置了一个默认的em大小, 你可以在css中修改按自己的风格修改em的比例 -->
  <!-- supportPreview: 通过iframe生成一个能够关闭的弹框, 里面用来访问链接, 从而不会打断演讲 -->
  <!-- urlHashCtrl: 让URL栏hash和PPT页面对应 -->

  <!-- autoBlankTarget:  所有链接都默认在新标签打开 -->
  <!-- baseUrl: 能将链接和图片的相对路径改成你自己的网站等 -->

  <!-- @title: 设置html页面标签的文本 -->
</template>

<script>
import MarkDisplay from "vue-mark-display";
import Hammer from "hammerjs";

const md = `
# 这里是第一页

以及一些基本的自我介绍

<div class="notification">Welcome!</div>

----

<!-- style: background: #4fc08d; color: white; -->

## 这里是第二页

- 我会自动调节字号
- 我支持键盘和手势翻页
- 我支持 URL hash 同步

<small>现在页面网址的结尾应该是 \`....#2\`</small>

----
[空白链接](about:blank)

试一试按下 <kbd>Alt</kbd> 的同时点击这个链接

----

没了，讲完了
<div class="notification">Thanks!</div>

__谢谢__
`;

export default {
  components: { MarkDisplay },
  data: () => ({ md }),
  mounted() {
    // 添加手势翻页功能
    const mc = new Hammer(this.$el)
    const display = this.$refs.display
    mc.on("swipe", event => {
      if (event.pointerType === 'mouse') {
        return 
      }

      switch(event.direction) {
        case Hammer.DIRECTION_LEFT: 
          display.goNext();
          return;
        case Hammer.DIRECTION_RIGHT:
          display.goPrev();
          return;
      }
    })

  },
  methods: {
    // 方便从组件外部获取当前幻灯片的主标题，也就是第一页幻灯片的第一行文字，你可以用这个事件来设置 `document.title`
    setTitle({ title }) {
      document.title = title
    }
  }
};
</script>

<style>
/* 默认 */
/* body {
  margin: 0;
  overflow: hidden;
} */

/* 全局皮肤样式 */
@import "~@/assets/styles/demo.css";

/* 演示写入HTML5代码样式 */
.notification {
  position: absolute;
  top: 20px;
  right: 20px;
  border-radius: 3px;
  padding: 0.25em 1em;
  background-color: yellow;
  color: #666;
}
</style>
